<template>
    <div class="listDiv team-data-box">
        <div class="data-label flex-column mb20 ju-between pd20-column pl20">
            <div class="flex-row-center">
                <div class="flex-row-center">
                    <div class="label-line mr10"></div>
                    <span>人才统计</span>
                </div>
                <div class="eye pointer ml10" @click="obj.tjshow=!obj.tjshow"></div>
            </div>
            <div class="flex-row-center mt10" :style="{display: obj.tjshow?'flex':'none'}">
                <div class="card flex-column mr20 bgcolor1">
                    <span class="large-size ml20 flex-row-center flex-1 ">总数</span>
                    <span class="size-30 weight mr20 text-align-end flex-1">{{obj.statistics.cou||'--'}}</span>
                </div>
                <div class="card flex-column mr20 bgcolor2">
                    <span class="large-size ml20 flex-row-center flex-1 ">男性</span>
                    <span class="size-30 weight mr20 text-align-end flex-1">{{obj.statistics.sex1||'--'}}</span>
                </div>
                <div class="card flex-column mr20 bgcolor3">
                    <span class="large-size ml20 flex-row-center flex-1 ">女性</span>
                    <span class="size-30 weight mr20 text-align-end flex-1">{{obj.statistics.sex2||'--'}}</span>
                </div>
                <div class="card flex-column mr20" :class="[`bgcolor${i+4}`]" v-for="(v,i) in 7" :key="i">
                    <span class="large-size ml20 flex-row-center flex-1 ">{{globalData.eduList[i].t||''}}</span>
                    <span class="size-30 weight mr20 text-align-end flex-1">{{obj.statistics[`edu${i+1}`]||'--'}}</span>
                </div>
            </div>
        </div>
        <div class="searchDiv">
            <el-input clearable placeholder="匹配姓名/学校/专业" v-model="obj.req.key" class="search_key" />
            <el-select v-model="obj.req.sex" placeholder="性别" class="search_select" clearable>
                <el-option v-for="(item,index) in globalData.sexAry" :key="index" :label="item.text" :value="item.value" />
            </el-select>
            <!-- <el-input clearable placeholder="年龄" v-model="obj.req.age" class="search_key" /> -->
            <el-select v-model="obj.req.edu" placeholder="学历" class="search_select" clearable>
                <el-option v-for="(item,index) in globalData.eduList" :key="index" :label="item.text" :value="item.value" />
            </el-select>
            <el-select v-model="obj.req.workyear" placeholder="工作年限" class="search_select" clearable @change="(e)=>{typeChange(e,'workyear')}">
                <el-option v-for="(item,index) in globalData.workyearAry" :key="index" :label="item.text" :value="item.value" />
            </el-select>
            <!-- <DateRange v-model:start="obj.req.start" v-model:end="obj.req.end" sph="匹配" eph="注册日期" /> -->
            <span class="btn search" @click="init">搜索</span>
            <span class="btn refresh" @click="obj.req.currentpage=1;init()"></span>
            <div class="searchRight flex-row-center">
                <a class="mr10 base-color mini-size pointer" href="https://smartgarden.file.zh8848.top/other/人才导入模板.xls" download='人才导入模板.xls'>下载模板</a>
                <Upfile  @upload="uploadfile" type="button" :accept="['application/vnd.ms-excel']" />
                <span class="btn add" @click="add">添加人才</span>
            </div>
        </div>
        <div class="table_box"><div class="table_" id="tb">
            <ul class="head">
                <li class="mw150">姓名</li>
                <li class="mw60 wcen">性别</li>
                <li class="mw130 wcen">出生年月</li>
                <li class=" wcen">民族</li>
                <li class="mw120 wcen">学历</li>
                <li class="mw150">毕业院校</li>
                <li class="mw150">专业</li>
                <li class="mw190 wcen">添加时间</li>
                <li class="mw110 wcen">正常/停用</li>
                <li class="mw250 wcen">操作</li>
            </ul>
            <div class="body">
                <ul v-for="x in obj.ary" :key="x">
                    <li class="mw150">{{x.name}}</li>
                    <li class="mw60 wcen"><div :class="[proxy.$utils.findObj(x.sex,globalData.sexAry,'value').label]">{{proxy.$utils.find(globalData.sexAry, x.sex)}}</div></li>
                    <li class="mw130 wcen">{{x.birthday}}</li>
                    <li class=" wcen">{{proxy.$utils.find(globalData.nationList, x.nation)}}</li>
                    <li class="mw120 wcen">{{proxy.$utils.find(globalData.eduList, x.edu)}}</li>
                    <li class="mw150">
                        <el-tooltip class="box-item" effect="dark" :content="x.school" placement="top-start" :disabled="x.school.length<7">
                            <div class="lineOne pointer">{{x.school}}</div>
                        </el-tooltip>
                    </li>
                    <li class="mw150">
                        <el-tooltip class="box-item" effect="dark" :content="x.major" placement="top-start" :disabled="x.major.length<7">
                            <div class="lineOne pointer">{{x.major}}</div>
                        </el-tooltip>
                    </li>
                    <li class="mw190 wcen">{{x.intime}}</li>
                    <li class="mw110 wcen">
                        <el-switch v-model="x.state" size="small" :validate-event="false" @change="setstate(x)"
                            active-text="" inactive-text=""
                            active-value="1" inactive-value="0">
                        </el-switch>
                    </li>
                    <li class="mw250 wcen">
                        <el-button class="read_btn" type="primary" @click="read(x)">查看</el-button>
                        <el-button class="edit_btn mr10" type="success" :disabled="x.my!='1'||x.m_addtype!='2'" @click="edit(x)">修改</el-button>
                        <DelConfirm class="" @yesClick="del(x)" :disabled="x.my!='1'"/>
                    </li>
                </ul>
            </div>
        </div>
        </div><Pager :value="obj.req" :init="init" />

        <el-dialog v-model="obj.drawer.design" :title="obj.drawer.designTitle" width="1000px" :close-on-click-modal="false" :destroy-on-close="true">
            <router-view @close="obj.drawer.design = false" @init="init" />
        </el-dialog>
    </div>
</template>

<script setup>
    import { reactive, getCurrentInstance, ref, toRefs, provide, computed } from 'vue'
    import DateRange from '@/components/date_range.vue'
    import Pager from '@/components/pager.vue'
    import DelConfirm from '@/components/del_confirm.vue'
    import Upfile from '@/components/upfile_single.vue'
    let { proxy } = getCurrentInstance()

    let obj = reactive({
        drawer: {
            design: false,
            designTitle: "",
        },
        ary: [],
        req: {
            key: "",
            state:"",
            sex:"",
            edu:"",
            workyear: [],
            workyear_start: "",
            workyear_end: "",
            currentpage: 1,
            pagesize: 10,
        },
        statistics:{}
    });
    let sort = edus => {
        if(edus == undefined || edus == "") return {school:"",major:""}
        edus.sort((a, b) => {
            return new Date(b.end) - new Date(a.end) //这个实现排序
        })
        return edus[0] //取第一个
    }
    let init = () => {
        proxy.$ajax({
            url: '/persion/list',
            data: obj.req,
            bfLoading: true
        }).then(d => {
            // console.log(d)
            if(d.success){
                obj.ary = d.msg.list
                // obj.ary.forEach(t => t.edu = sort(t.edus))
                obj.req.count = d.msg.count
            }
        }).catch(() => { })
        getstatistics()
    }

    const getstatistics = ()=>{
        proxy.$ajax({
            url: '/persion/statistics',
            data: {},
            bfLoading: true
        }).then(d => {
            if(d.success){
                obj.statistics = d.msg
            }
        }).catch(() => { })
    }

    const uploadfile = (e)=>{
        console.log(e);
        const xlsImport = async () =>{
            const list = await proxy.$utils.xlsImport(proxy,e)
            console.log(list);
            let keys = {'姓名':'name','手机号':'mobile','性别':'sex','出生年月':'birthday','民族':'nation','个人优势':'specialty','最高学历':'edu','毕业院校':'school','专业':'major','薪资要求':'salary','参加工作时间':'workyear'}
            let updata = []
            let noUploads = '';
            list.map((item,idx)=>{
                if(idx>0&&item['姓名']&&item['手机号']&&item['民族']&&item['最高学历']){
                    let o = {
                        id: 0,
                        name: "",
                        mobile: "",
                        sex:"1",
                        birthday:"",
                        nation: "",
                        edu:"",
                        school:"",
                        major:"",
                        salary:0,
                        workyear:"",
                        specialty:"",
                        objective:[],
                        works:[],
                        projects:[],
                        edus:[],
                    }
                    Object.keys(item).forEach((key) => {
                        if(key==='性别'){
                            o[keys[key]] = item[key]==='男'?1:2;
                        }else if(key==='最高学历'){
                            o[keys[key]] = proxy.$utils.findObj(item[key],proxy.globalData.eduList,'text').value;
                        }else if(key==='民族'){
                            o[keys[key]] = proxy.$utils.findObj(item[key],proxy.globalData.nationList,'text').value;
                        }else{
                            o[keys[key]] = item[key];
                        }
                    });
                    updata.push(o)
                }
            })
            console.log(updata);
            // return
            for(let i=0;i<updata.length; i++){
                await proxy.$ajax({url: 'persion/design',data: updata[i],bfLoading: true,}).then(d => {
                    console.log(d)
                    if(!d.success){
                        noUploads += (updata[i].name+':'+e.err+'; ');
                    }
                }).catch(e => {
                    noUploads += (updata[i]+':'+(e||'其他原因')+'; ');
                })
            }
            if(noUploads===''){
                proxy.elMessageMixin("导入成功", 'success')
            }else{
                proxy.elMessageMixin(`导入失败的人才：${noUploads}`, 'error')
            }
            init()
        }
        xlsImport()
    }

    let editId = ref(0)
    let editType = ref('edit')
    provide("id", editId); //不能加.value
    provide("type", editType);
    let add = () => {
        obj.drawer.design = true
        obj.drawer.designTitle = "添加人才"
        editId.value = 0;
        editType.value = 'edit'
    }
    let edit = x => {
        obj.drawer.design = true
        obj.drawer.designTitle = "修改人才"
        editId.value = x.persion_id;
        editType.value = 'edit'
    }
    let read = x => {
        obj.drawer.design = true
        obj.drawer.designTitle = "人才简历"
        editId.value = x.persion_id;
        editType.value = 'read'
   
    }

    const typeChange = (e,key)=>{
        obj.req[`${key}_start`] = e?e[0]:''
        obj.req[`${key}_end`] = e?e[1]:''
    }

    let setstate = x => {
        proxy.$ajax({
            url: '/persion/setstate',
            data: { id: x.persion_id },
            bfLoading: true
        }).then(d => {
            if(d.success){
                proxy.elMessageMixin("状态变更成功", 'success')
                init()
            }else{
                proxy.elMessageMixin(d.err, 'error')
            }
        }).catch(() => { })
    }
    let del = x => {
        proxy.$ajax({
            url: '/persion/delete',
            data: { id: x.persion_id },
            bfLoading: true
        }).then(d => {
            if(d.success){
                proxy.elMessageMixin("删除成功", 'success')
                init()
            }else{
                proxy.elMessageMixin(d.err, 'error')
            }
        }).catch(() => { })
    }
</script>

<style scoped>
    ::-webkit-scrollbar { width:10px; background-color: #FFFFFF; }
    .search_select { width:100px!important; }
    .search_key { width:160px!important; }
    #tb ul li.li2 { width: 40px; }
    #tb ul li.li3 { width: 45px; }
    #tb ul li.li4 { width: 55px; }
    #tb ul li.li5 { width: 100px; }
    #tb ul li.li6 { width: 100px; }
</style>